import React, { Component } from "react";
import { NavBar } from "antd-mobile";
import { connect } from "react-redux";
import "./index.less";

//组件
import Sea from "../../components/Sea";
import New from "./compones/New/New";
import Nav from "../Index/compones/Nav/Nav.jsx";
import Banner from "./compones/Banner/Banner";
import Goods from "./compones/Goods/Goods";

//静态资源
import Xiao from "../../assets/img/pic_logo_white 2.png";
import Site from "../../assets/img/icon_location@3x.png";


import { reqBannerList, reqGoodsList, reqGrouponList } from "../../http/api";

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      banner: [],
      grounpon: [],
      goods: [],
      n: 0,
    };
  }
  componentDidMount() {
    reqBannerList().then((res) => {
      if (res.data.code === 200) {
        this.setState({
          ...this.state,
          banner: res.data.list,
        });
      }
    });
    reqGrouponList().then((res) => {
      if (res.data.code === 200) {
        this.setState({
          ...this.state,
          grounpon: res.data.list,
        });
      }
    });
    reqGoodsList().then((res) => {
      if (res.data.code === 200) {
        this.setState({
          ...this.state,
          goods: res.data.list,
        });
      }
    });
  }
  changeN(e) {
    this.setState({
      ...this.state,
      n: e,
    });
  }
  render() {
    let { banner, grounpon, goods, n } = this.state;
    console.log(this.state);
    return (
      <div className="index">
        <NavBar
          mode="light"
          icon={<img src={Xiao}></img>}
          rightContent={[<img src={Site} key={0}></img>]}
        >
          <Sea {...this.props}></Sea>
        </NavBar>
        {/* 一重礼 */}
        <New
          {...this.props}
          banner={banner}
          but={"一重礼"}
          sp1={"新人特价商品"}
          sp2={"(限量供应,先到先得)"}
        ></New>
        {/* 秒杀活动 */}
        <Nav list={banner[0] ? banner[0] : []} {...this.props}></Nav>
        {/* 二重礼 */}
        {grounpon.length > 0 ? (
          <Banner
            {...this.props}
            banner={grounpon}
            type={2}
            but={"限时秒杀"}
            sp1={"信任商品特区"}
            sp2={"(限量供应,先到先得)"}
          ></Banner>
        ) : null}
        <Goods
          goods={goods}
          n={n}
          setN={(e) => this.changeN(e)}
          {...this.props}
        ></Goods>
      </div>
    );
  }
}
